<!DOCTYPE html>
<html>
<head>
{{template "common_header.html" .}}
    <style>
        .btn-float{
            display: inline-block;
            float: left;
            margin-left:5px;
            margin-top:5px;
        }
    </style>
</head>
<body>
<div class="x-nav">
    <span class="layui-breadcrumb">
        <a href="javascript:void(0);">首页</a>
        <a href="">管理员管理</a>
        <a><cite>账号管理</cite></a>
    </span>
    <a class="layui-btn layui-btn-normal layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i>
    </a>
</div>
<div class="x-body layui-anim layui-anim-up">
    <div class="layui-collapse">
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">筛选</h2>
            <div class="layui-colla-content layui-show">
                <form action="/accountList" class="layui-form" method="get">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">账号ID</label>
                        <div class="layui-input-block">
                            <input type="text" name="id" placeholder="账号ID" autocomplete="off" class="layui-input" value="{{.query.id}}">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-block">
                            <input type="text" name="name" placeholder="姓名" autocomplete="off" class="layui-input" value="{{.query.name}}">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">账号</label>
                        <div class="layui-input-block">
                            <input type="text" name="account" placeholder="账号" autocomplete="off" class="layui-input" value="{{.query.account}}">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-block" style="margin-left:100px;">
                            <button class="layui-btn layui-btn-normal layui-inline">查询</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <xblock>
        <button class="layui-btn layui-btn-danger" id="all-item-delete"><i class="layui-icon"></i>批量删除</button>
        <button class="layui-btn layui-btn-normal" onclick="x_admin_show('添加账号','/addAccount', 550, 450)"><i class="layui-icon"></i>添加</button>
        <span class="x-right" style="line-height:40px">共有数据：{{.total}} 条</span>
    </xblock>
    <table class="layui-table">
        <colgroup>
            <col width="50">
            <col width="90">
            <col>
            <col width="80">
            <col>
            <col>
            <col width="80">
            <col>
            <col width="80">
            <col width="80">
            <col width="80">
            <col width="130">
        </colgroup>
        <thead>
        <tr>
            <th>
                <div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>
            </th>
            <th style="text-align:center;">头像</th>
            <th style="text-align:center;">姓名</th>
            <th style="text-align:center;">账号</th>
            <th style="text-align:center;">账号类型</th>
            <th style="text-align:center;">部门</th>
            <th style="text-align:center;">状态</th>
            <th style="text-align:center;">创建时间</th>
            <th style="text-align:center;">Token</th>
            <th style="text-align:center;">APP</th>
            <th style="text-align:center;">角色</th>
            <th style="text-align:center;">操作</th>
        </tr>
        </thead>
        <tbody>
        {{range $index,$item := .accountList}}
        <tr style="text-align:center;">
            <td>
                <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='{{$item.id}}'><i class="layui-icon">&#xe605;</i></div>
            </td>
            <td>
                <img style="width:60px;height:60px;" class="layui-nav-img" src="{{$item.photo}}"/>
            </td>
            <td>{{$item.name}}</td>
            <td>{{$item.account}}</td>
            <td>
            {{if eq $item.is_super 0}}普通账号{{else}}超级管理员{{end}}
            </td>
            <td>
                {{$item.department_desc}}
            </td>
            <td>
            {{if eq $item.status 0}}<span class="layui-badge layui-bg-blue">正常</span>{{else}}<span class="layui-badge layui-bg-gray">禁用</span>{{end}}
            </td>
            <td>{{$item.create_date}}</td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-normal btn-float item-model-token" style="margin-left:5px;" account_id="{{$item.id}}">查看</button>
            </td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-normal btn-float" onclick="x_admin_show('编辑账号APP','/updateAccountApp?id={{$item.id}}', 500, 400)">编辑</button>
            </td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-normal btn-float" onclick="x_admin_show('编辑账号角色','/updateAccountRole?id={{$item.id}}', 500, 400)">编辑</button>
            </td>
            <td>
                <button class="layui-btn layui-btn-sm layui-btn-normal btn-float" onclick="x_admin_show('编辑账号','/updateAccount?id={{$item.id}}', 550, 450)">编辑</button>
                <button class="layui-btn layui-btn-sm layui-btn-danger btn-float item-model-delete" style="margin-left:5px;" account_id="{{$item.id}}">删除</button>
            </td>
        </tr>
        {{end}}
        </tbody>
    </table>
    {{template "pager.html" .}}
</div>
{{template "common_js.html" .}}
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;
    });

    $(function () {

        // 查看Token
        $('.item-model-token').click(function () {
            var id = $(this).attr("account_id");
            var url = '/doSearchToken';
            var data = {
                id:id
            };
            $.post(url, data, function(resp) {
                if(resp.en == 200) {
                    var data = resp.data;
                    var token = data.token;
                    var mylayer = layer.open({
                        title: '查看Token',
                        btn: ['确定', '取消'],
                        content: token,
                        yes: function(index, layero){

                        },
                    });
                } else {
                    layer.msg(resp.em);
                    layer.close(mylayer);
                }
            });
        });

        // 删除账号
        $('.item-model-delete').click(function () {
            var id = $(this).attr("account_id");
            var mylayer = layer.open({
                title: '删除账号',
                btn: ['确定', '取消'],
                content: '你确定要删除这个账号吗？',
                yes: function(index, layero){
                    var url = '/doDeleteAccount';
                    var data = {
                        id:id
                    };
                    $.post(url, data, function(resp) {
                        if(resp.en == 200) {
                            layer.msg(resp.em);
                            setTimeout(function(){
                                window.location.reload();
                            },1000);
                        } else {
                            layer.msg(resp.em);
                            layer.close(mylayer);
                        }
                    });
                },
            });
        });

        // 批量删除账号
        $('#all-item-delete').click(function () {
            var ids = new Array();
            $('.layui-form-checked').each( function( index, val) {
                var id = $(val).attr('data-id');
                if(id !== undefined && id !== '') {
                    ids.push(id);
                }
            });
            if(ids.length === 0) {
                return;
            }
            var mylayer = layer.open({
                title: '删除账号',
                btn: ['确定', '取消'],
                content: '你确定要删除已选中的账号吗？',
                yes: function(index, layero){
                    var url = '/doDeleteAccountBatch';
                    var data = {
                        ids:ids.join(",")
                    };
                    $.post(url, data, function(resp) {
                        if(resp.en == 200) {
                            layer.msg(resp.em);
                            setTimeout(function(){
                                window.location.reload();
                            },1000);
                        } else {
                            layer.msg(resp.em);
                            layer.close(mylayer);
                        }
                    });
                },
            });
        });

    });
</script>
{{template "pager_js.html" .}}
</body>
</html>